<!DOCTYPE html>
<html>
<head>
  <title>服务器代理</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div class="container">
    <h1>服务器代理</h1>
    <div class="character-container">
      <div class="character">
        <span>代理服务器 A</span>
        <img src="./images/serverC.svg" alt="">
        <span id="skill1"></span>
      </div>
      <div class="character">
        <span>代理服务器 B</span>
        <img src="./images/serverA.svg" alt="">
        <span id="skill2"></span>
      </div>
      <div class="character">
        <span>代理服务器 C</span>
        <img src="./images/serverB.svg" alt="">
        <span id="skill3"></span>
      </div>
    </div>
  </div>
   <script src="./js/index.js"></script>
  <script>
    if (state1 === state2 && state2 === state3&&!state['__v_isReactive']&&state1['__v_isReactive']) {
      // 更新HTML页面中的分身技能
      document.getElementById("skill1").textContent = `代理后的资源为: ${state2.data}、${state2.filedata}`;
      document.getElementById("skill2").textContent = `代理后的资源为 :${state2.data}、${state2.filedata}`;
      document.getElementById("skill3").textContent = `代理后的资源为 :${state2.data}、${state2.filedata}`;
    }else{
      document.getElementById("skill1").textContent = ``;
      document.getElementById("skill2").textContent = ``;
      document.getElementById("skill3").textContent = ``;
    }
  </script>
</body>

</html>